<template>
    <div class="cart-sku" ref="target" >
        <div class="attrs" @click="toggle">
            <span class="ellipsis">{{attrsText}}</span>
            <i class="iconfont icon-angle-down"></i>
        </div>
<!--        <div class="layer" v-if="visible">-->
<!--            <div v-if="loading" class="loading"></div>-->
<!--            <GoodsSku @change="changeSku" :skuId="skuId" v-else :goods="goods"/>-->
<!--            &lt;!&ndash;      <XtxButton @click="submit" v-if="!loading" type="primary" size="mini" style="margin-left:60px">确认</XtxButton>&ndash;&gt;-->
<!--        </div>-->
    </div>
</template>
<script>
    import {onClickOutside} from '@vueuse/core'

    import GoodsSku from "@/views/goods/components/goods-sku";
    import {getGoodsSku} from "@/api/cart";

    export default {
        name: 'CartSku',
        components: {GoodsSku},
        props: {
            attrsText: {
                type: String,
                default: ''
            },
            skuId: {
                type: String,
                default: ''
            },

        },
        data() {
            return {
                visible: false,
                goods: null,
                loading: false,
                currSku: null
            }
        },
        created() {
            getGoodsSku(this.skuId).then(data => {
                this.goods = data.result
                this.loading = false
            })
        },
        methods: {
            // 打开
            open() {
                this.visible = true
                // 获取商品数据（specs,skus）
                this.loading = true
                getGoodsSku(this.skuId).then(data => {
                    this.goods = data.result
                    this.loading = false
                })
            },
            // 关闭
            close() {
                this.visible = false
            },
            // 切换
            toggle() {
                console.log('aaaaaaaaa')
                // this.visible ? close() : open()
            },
            // 监听sku改变的函数，记录sku信息
            changeSku(sku) {
                this.currSku = sku
            },
            // 点击确认的时候，更改后的sku信息提交给父组件（购物车组件）
            submit() {
                // 当你currSku有值，且skuId和默认的skuId不同
                if (this.currSku && this.currSku.skuId && this.currSku.skuId !== this.skuId) {
                    this.$emit('change', this.currSku)
                    close()
                }
            }
        },
        mounted() {
            // 点击其他地方关闭
            onClickOutside(this.$refs.target, () => {
                this.close()
            })
        },

    }
</script>
<style scoped lang="less">
    .cart-sku {
        height: 28px;
        border: 1px solid #f5f5f5;
        padding: 0 6px;
        position: relative;
        margin-top: 10px;
        display: inline-block;
        z-index: 999;

        .attrs {
            line-height: 24px;
            display: flex;

            span {
                max-width: 230px;
                font-size: 14px;
                color: #999;
            }

            i {
                margin-left: 5px;
                font-size: 14px;
            }
        }

        .layer {
            position: absolute;
            left: -1px;
            top: 40px;
            z-index: 10;
            width: 400px;
            border: 1px solid @xtxColor;
            box-shadow: 2px 2px 4px lighten(@xtxColor, 50%);
            background: #fff;
            border-radius: 4px;
            font-size: 14px;
            padding: 20px;

            &::before {
                content: "";
                width: 12px;
                height: 12px;
                border-left: 1px solid @xtxColor;
                border-top: 1px solid @xtxColor;
                position: absolute;
                left: 12px;
                top: -8px;
                background: #fff;
                transform: scale(.8, 1) rotate(45deg);
            }

            .loading {
                height: 224px;
                background: url(../../../assets/images/loading.gif) no-repeat center;
            }
        }
    }
</style>
